<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import request from "@/utils/request";
export default {
  name: "FruitBar",
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    request.get("/fruit/getFruitList").then(function (res) {
      //   console.log(res.data);
      var name = [];
      var sale = [];
      for (var i = 0; i < res.data.length; i++) {
        name.push(res.data[i].name);
        sale.push(res.data[i].sale);
      }
      myChart.setOption({
        titile: {
          Text: "柱状图",
          x: "center",
          background: "pink",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          left: "10%",
          icon: "circle",
        },
        xAxis: {
          data: name,
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: sale,
            itemStyle: {
              color: function (params) {
                let mycolor = ["red", "yellow", "blue", "pink", "green"];
                if (params.dataIndex >= mycolor.length) {
                  params.dataIndex = params.dataIndex - mycolor.length;
                }
                return mycolor[params.dataIndex];
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  value: "最大值",
                },
                {
                  type: "min",
                  value: "最小值",
                },
              ],
            },
          },
        ],
      });
    });
  },
  methods: {},
};
</script>

<style scoped>
#main {
  height: 500px;
  width: 500px;
}
</style>
